<script setup lang="ts">
import { IconFont } from '@nutui/icons-vue-taro';
import { useAuthStore } from '@/store';
import { storeToRefs } from 'pinia';
import { reactive, ref, watch, computed } from 'vue';
import { useLogout, useImage } from '@/hooks';
import Taro from '@tarojs/taro';
import { request } from '@/service/request';

const { nurseUser } = storeToRefs(useAuthStore());
console.log('nurseUser', nurseUser);

const CORPID = 'wweb2e9977cf9d5076' // 企业ID
// const CONFIG_ID = '1234567890123456' // 客服配置ID

watch(
  () => nurseUser.value.nurseUserFamilyList,
  newVal => {
    if (newVal && newVal.length > 0) {
      console.log('ok');
    }
  },
  { deep: true }
);

const mylist = computed(() => {
  return nurseUser.value.nurseUserFamilyList.map(i => {
    return {
      ...i,
      text: i.name,
      value: i.id
    };
  });
});

const otherInfo = ref('被监护人 男 10岁');
const showHealthRolePopup = ref(false);

const toHealthCard = () => {
  Taro.navigateTo({
    url: '/package-other/health/index'
  });
};

const toHealthCode = () => {
  Taro.navigateTo({
    url: '/package-my/healthcode/index'
  });

};

const toCallCenter = () => {
  request.get('/QyWeChat/getKfUrl', {
    openKfid: '1688856655528486',
  }, {
    useErrMsg: true
  }).then((res:any) => {
    console.log("res==== kf url", res)
  })
  // const customerServiceLink = 'https://work.weixin.qq.com/kfid/kfcbb75cbaa310f5ffc';// 替换为实际的企业微信客服链接
  //   Taro.navigateTo({
  //     url: `/pages/webview/webview?url=${encodeURIComponent(customerServiceLink)}`
  //   });
    Taro.openCustomerServiceChat({
      // extInfo: {url: 'https://work.weixin.qq.com/gm/f57be2f86b04ed17c54875884cc025c8'},
      extInfo: {url: 'https://work.weixin.qq.com/kfid/kfc50fe6101006159db'},
      corpId: CORPID,
      success(res) {}
    })

  // wx.openEnterpriseCustomerServiceChat({
  //   corpId: CORPID,
  //   configId: CONFIG_ID,
  //   success: (res:any) => {
  //     console.log('客服会话打开成功', res)
  //     Taro.showToast({
  //       title: '客服会话打开成功',
  //       icon: 'success'
  //     })
  //   },
  //   fail: (err:any) => {
  //     console.error('客服会话打开失败', err)
  //     Taro.showToast({
  //       title: '客服会话打开失败，请稍后再试',
  //       icon: 'none'
  //     })
  //   }
  // })
};

const expertModule: any = reactive({
  show: false,
  columns: nurseUser.value.nurseUserFamilyList.map(i => {
    return {
      ...i,
      text: i.name,
      value: i.id
    };
  }),
  // showExpert: () => {
  //   if (props.isOrder) return
  //   expertModule.show = !expertModule.show;
  // },
  confirm: ({ selectedValue, selectedOptions }: any) => {
    console.log(selectedValue[0], selectedOptions[0]);
    const { name, sex, age } = selectedOptions[0];
    otherInfo.value = `${name} ${sex == 1 ? '男' : '女'} ${age || 20}岁`;

    // props.formData.expertId = selectedValue[0];
    // props.formData.expertName = selectedOptions[0].name;
    // props.formData.expertFee = selectedOptions[0].fee
    expertModule.show = false;
  },
  setList: async () => {
    // const { error, success } = await getExpertList();
    // if (!error && success?.records) {
    //   const options = success?.records.map((item: any) => {
    //     if (item.sorts == '1' && !props.isOrder) {
    //       props.formData.expertId = item.id;
    //       props.formData.expertName = `${item.name}`;
    //       props.formData.expertFee = item.fee;
    //     }
    //     return { text: `${item.name}(￥${item.fee})`, name: item.name, value: item.id, fee: item.fee };
    //   });
    //   expertModule.columns = [{ text: '', value: '', fee: 0 }, ...options];
    // }
  }
});
// const showPickUser = ref(false);
const changeUser = () => {
  // showPickUser.value = true;
  console.log('切换');
  expertModule.show = true;
};

const toHistory = () => {
  Taro.navigateTo({
    url: '/pages/cloud-test/index'
  });
};

const toHealthRole = () => {
  // showHealthRolePopup.value = true;
  Taro.previewImage({
    urls: ['https://anfine.huasun-healthcare.com/api/sys/common/static/temp/12_1754100405565.png'],
    current: 0
  })
};
</script>

<template>
  <view class="m-auto w-340px p-10px bg-white rounded-lg shadow-lg">
    <view class="flex justify-between ​​items-center​​">
      <view @click="changeUser">
        <view class="flex items-center justify-center">
          <view class="relative mr-2">
            <image class="w-60 h-60 rounded-full bg-gray-200" mode="scaleToFill"
              :src="useImage(nurseUser.avatar || '')" />
            <image class="absolute -right-6 -top-3 w-24 h-24 rounded-full" mode="scaleToFill"
              src="https://jsz1234.xyz/tmp/huangzuan.png" />
          </view>
          <text class="text-sm text-[#3d8944] font-bold">{{ nurseUser.name }}</text>
        </view>
      </view>

      <view>
        <view class="flex items-center justify-center flex-col">
          <text class="text-sm text-gray-600" @click="changeUser">被监护人[切换]</text>
          <text class="text-gray-600 text-sm block">{{ otherInfo }}</text>
        </view>
      </view>

      <view>
        <view class="flex-1 flex items-center justify-center flex-col" @click="toHealthCode">
          <image class="w-50 h-50" mode="aspectFit" src="https://jsz1234.xyz/tmp/ewm.png" />
          <text class="text-center text-gray-600 text-sm">健康码</text>
        </view>
      </view>

      <view>
        <view class="flex items-center justify-center flex-nowrap" @click="toHealthCard">
          <!-- <IconFont name="dongdong"></IconFont> -->
          <image class="w-40 h-40" mode="aspectFit" src="https://jsz1234.xyz/tmp/jkdn.png" />
          <text class="text-[#3d8944] text-sm">健康档案</text>
        </view>
      </view>
    </view>
    <view class="flex justify-between mt-2 text-gray-600">
      <text>余额：0</text>
      <text>积分：0</text>
      <text>兑换券：0张</text>
    </view>

    <view class="flex justify-between mt-2 text-gray-600">
      <view class="flex justify-center ​​items-center​​" @click="toHealthRole">
        <image class="w-60 h-60" src="https://jsz1234.xyz/tmp/78.jpg" mode="scaleToFill" />
        <view class="ml-2">
          <view>张三</view>
          <view class="text-xs text-gray-300">健康管家</view>
        </view>
      </view>
      <view class="flex justify-center ​​items-center​​ flex-col ​​items-center​​" @click="toCallCenter">
        <image class="w-48 h-48" src="https://jsz1234.xyz/tmp/qywx.png" mode="scaleToFill" />
        <text class="text-sm">呼叫中心</text>
      </view>
      <view class="flex justify-center flex-col ​​items-center​​" @click="toHistory">
        <image class="w-48 h-48" src="https://jsz1234.xyz/tmp/weixin.png" mode="scaleToFill" />
        <text class="text-sm">历史记录</text>
      </view>
    </view>
    <!-- <nut-popup v-model:visible="showPickUser" :style="{ padding: '30px 50px' }">正文</nut-popup> -->
    <nut-popup v-model:visible="expertModule.show" position="bottom">
      <nut-picker :columns="mylist" title="选择被监护人" @cancel="expertModule.show = false"
        @confirm="expertModule.confirm" />
    </nut-popup>
    
    <!-- 健康管家二维码弹窗 -->
    <nut-popup v-model:visible="showHealthRolePopup" position="center" :style="{ padding: '40rpx' }">
      <view class="relative bg-white rounded-lg p-[30rpx]">
        <!-- 关闭按钮 -->
        <view 
          class="absolute top-0 right-0 w-[30rpx] h-[30rpx] flex items-center justify-center cursor-pointer"
          @click="showHealthRolePopup = false"
        >
          <IconFont name="close" size="20" color="#999"></IconFont>
        </view>
        
        <view class="flex flex-col items-center">
          <image 
            class="w-[400rpx] h-[400rpx] mb-[20rpx]" 
            src="https://anfine.huasun-healthcare.com/api/sys/common/static/temp/30_1754033053305.jpg" 
            mode="aspectFit" 
            show-menu-by-longpress
          />
          <text class="text-[28rpx] text-gray-700 text-center">长按联系你的健康管家！</text>
        </view>
      </view>
    </nut-popup>
  </view>
</template>
